<template>
	
	<div id="email">
		
		<div id="eheader">
			<img src="../../assets/img/xin.png" alt="" />
			<div>信箱</div>
			<img src="../../assets/img/shuo.png" alt="" />
		</div>
		
		<div class="uncol" v-show="status">
			<h1>你有一个小信箱</h1>
			<div>美味调剂生活，订阅你最喜欢的美食栏目，将会在这里收到最新的高人气菜谱和美文。</div>
			<span @click="change">登录</span>
			<span @click="changer">手机注册</span>
		</div>
		
		<div id="eemail" v-show="!status">
			<div class="eitems">
				<img src="../../assets/img/chu.png" alt="" />
				<div>
					<p>下厨房</p>
					<p>欢迎来到下厨房，送你300元新人礼券！</p>
				</div>
				<div>4分钟前</div>
			</div>
		</div>
		
		
	</div>
	
</template>

<script>
	export default {
		methods: {
			change(){
				this.$store.commit('changeLoginState');
			},
			changer(){
				this.$store.commit('changeRegState');
			}
		},
		computed: {
			status(){
				return this.$store.state.status;
			}
		}
	}
</script>

<style scoped>
	
	#email{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	#eheader{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 1.865384rem;
		display: flex;
		align-items: center;
	}
	#eheader img:nth-child(1){
		margin-left:0.548076rem;
		width:0.625rem;
		height:0.586538rem;
	}
	#eheader div{
		flex-grow: 1;
		font-size: 0.384615rem;
		text-align: center;
	}
	#eheader :nth-child(3){
		margin-right:0.576923rem;
		width:0.596153rem;
		height:0.576923rem;
	}
	.uncol{
		position: absolute;
		left: 0;
		right: 0;
		top:1.865384rem;
		padding-top:2.115384rem;
	}
	.uncol h1{
		font-size: 0.634615rem;
		font-weight: normal;
		text-align: center;
		margin-bottom:1.5rem;
	}
	.uncol div{
		width:70%;
		margin:auto;
		font-size: 0.298076rem;
		margin-bottom:1.25rem;
		text-align: center;
	}
	.uncol span{
		display: block;
		width:9.230769rem;
		height:1.153846rem;
		background: #6fbd53;
		text-align: center;
		margin: auto;
		font-size: 0.355769rem;
		color:white;
		line-height: 1.153846rem;
		margin-bottom:0.576923rem;
	}
	.uncol :nth-child(4){
		background: #f96650;
		margin-bottom:1.307692rem;
	}
	.uncol p{
		font-size: 0.365384rem;
		color:#f96650;
		text-align: center;
	}
	#eemail{
		position: absolute;
		left: 0;
		right: 0;
		top:1.865384rem;
		bottom:0;
		overflow: auto;
		/*height:100%;*/
	}
	#eemail .eitems{
		display: flex;
		align-items: center;
		width:100%;
		height:1.596153rem;
	}
	#eemail .eitems img{
		width:0.826923rem;
		height:0.798076rem;
		margin-left:0.596153rem;
		margin-right:0.625rem;
	}
	#eemail .eitems :nth-child(2){
		flex-grow: 1;
	}
	#eemail .eitems :nth-child(2) p:nth-child(1){
		font-size:0.375rem;
		color:#383835;
	}
	#eemail .eitems :nth-child(2) p:nth-child(2){
		font-size:0.26923rem;
		color:#9c9c96;
	}
	#eemail .eitems :nth-child(3){
		margin-right:0.442307rem;
		font-size:0.201923rem;
		color:#95958f;
	}
</style>